<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=no"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <meta name="renderer" content="webkit">
    <meta http-equiv="Cache-Control" content="no-siteapp"/>
    <link rel="stylesheet" href="common/css/mdui.min.css"/>
    <link rel="stylesheet" href="common/css/paging.css"/>
    <script src="/api.js"></script>
    <script src="common/js/jquery.min.js"></script>
    <script src="common/js/paging.js"></script>
    <script src="common/js/mdui.min.js"></script>
    <title>内网穿透</title>
</head>
<body class="mdui-drawer-body-left mdui-appbar-with-toolbar  mdui-theme-primary-indigo mdui-theme-accent-pink mdui-theme-layout-auto">
<header class="mdui-appbar mdui-appbar-fixed">
    <div class="mdui-toolbar mdui-color-theme">
        <span class="mdui-btn mdui-btn-icon mdui-ripple mdui-ripple-white"
              mdui-drawer="{target: '#main-drawer', swipe: true}"><i class="mdui-icon material-icons">menu</i></span>
        <a href="./center.html" class="mdui-typo-headline mdui-hidden-xs">内网穿透</a>
        <div class="mdui-toolbar-spacer"></div>
        <div class=" mdui-btn mdui-btn-dense"><span>等级：<span
                id="level">***</span> 账户：<span id="username">***</span> </span></div>
        <div id="login_out" class=" mdui-btn mdui-btn-dense">退出</div>
    </div>
</header>
<div class="mdui-drawer" id="main-drawer">
    <div class="mdui-list" mdui-collapse="{accordion: true}" style="margin-bottom: 76px;">
        <div class="mdui-collapse-item mdui-collapse-item-open">
            <a class="mdui-collapse-item-header mdui-list-item mdui-ripple" href="./center.html">
                <i class="mdui-list-item-icon mdui-icon material-icons mdui-text-color-blue">near_me</i>
                <div class="mdui-list-item-content">穿透服务</div>
            </a>
            <a class="mdui-collapse-item mdui-collapse-item-open" href="port.html">
                <div class="mdui-collapse-item-header mdui-list-item mdui-ripple">
                    <i class="mdui-list-item-icon mdui-icon  material-icons mdui-text-color-purple">layers</i>
                    <div class="mdui-list-item-content">端口管理</div>
                </div>
            </a>
            <a class="mdui-collapse-item mdui-collapse-item-open" href="domain.html">
                <div class="mdui-collapse-item-header mdui-list-item mdui-ripple">
                    <i class="mdui-list-item-icon mdui-icon material-icons mdui-text-color-green">layers</i>
                    <div class="mdui-list-item-content">域名管理</div>
                </div>
            </a>
            <a class="mdui-collapse-item mdui-collapse-item-open" href="autoproxy.html">
                <div class="mdui-collapse-item-header mdui-list-item mdui-ripple">
                    <i class="mdui-list-item-icon mdui-icon  material-icons mdui-text-color-cyan-300">layers</i>
                    <div class="mdui-list-item-content">自动穿透</div>
                </div>
            </a>
            <a class="mdui-collapse-item mdui-collapse-item-open" href="log.html">
                <div class="mdui-collapse-item-header mdui-list-item mdui-ripple">
                    <i class="mdui-list-item-icon mdui-icon material-icons mdui-text-color-blue">layers</i>
                    <div class="mdui-list-item-content">穿透日志</div>
                </div>
            </a>
        </div>
    </div>
</div>

<script>
    $(function () {
        var userInfo = localStorage.getItem("userInfo")
        if (!userInfo) {
            location.href = "login.html";
        } else {
            userInfo = JSON.parse(userInfo)
            $("#username").text(userInfo.username)
            $("#level").text(userInfo.level)
        }
        $("#login_out").click(function () {
            localStorage.removeItem("userInfo")
            location.href = "login.html"
        })
    })
</script>

<div style="padding: 1rem">

    <div style="padding: .6rem">
        <button class="mdui-btn mdui-btn-raised mdui-btn-dense mdui-color-deep-purple-accent mdui-ripple"
                onclick="new mdui.Dialog('#addUser').open()">
            添加
        </button>
        <button class="mdui-btn mdui-btn-raised mdui-btn-dense mdui-color-deep-purple-accent mdui-ripple" id="checkCore">
            检查内核版本
        </button>
        <button class="mdui-btn mdui-btn-raised mdui-btn-dense mdui-color-deep-purple-accent mdui-ripple" id="refUser">
            刷新配置信息
        </button>
    </div>

    <div class="mdui-table-fluid">
        <table class="mdui-table">
            <thead>
            <tr>
                <th>名字</th>
                <th>内网服务</th>
                <th>穿透服务</th>
                <th>状态</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody id="tabData">
            </tbody>
        </table>
    </div>
    <div style="margin-top: 10px">
        <h3 class="chapter-title mdui-text-color-theme">穿透日志</h3>
        <ul class="mdui-list" id="log">
        </ul>
    </div>
    <div class="mdui-dialog" id="addUser" style="overflow: scroll">
        <form id="handle-form">
            <div class="mdui-dialog-content">
                <input class="mdui-textfield-input" id="password" name="password" placeholder="password" type="hidden"/>
                <input class="mdui-textfield-input" id="usernameFrom" name="username" placeholder="username"
                       type="hidden"/>
                <div class="mdui-textfield">
                    <label class="mdui-textfield-label">内网IP</label>
                    <input class="mdui-textfield-input" name="ip" placeholder="内网IP" type="text"/>
                </div>
                <div class="mdui-textfield">
                    <label class="mdui-textfield-label">内网端口</label>
                    <input class="mdui-textfield-input" name="port" placeholder="内网端口" type="text"/>
                </div>

                <div class="mdui-textfield" id="type">
                    <label class="mdui-textfield-label">穿透类型</label>
                    <label class="mdui-radio" style="margin-right: 20px">
                        <input type="radio" value="TCP" name="type" checked/>
                        <i class="mdui-radio-icon"></i>
                        TCP
                    </label>
                    <label class="mdui-radio" style="margin-right: 20px">
                        <input type="radio" value="UDP" name="type"/>
                        <i class="mdui-radio-icon"></i>
                        UDP
                    </label>
                    <label class="mdui-radio" style="margin-right: 20px">
                        <input type="radio" value="TCP_UDP" name="type"/>
                        <i class="mdui-radio-icon"></i>
                        TCP+UDP
                    </label>
                </div>

                <div class="mdui-textfield" id="server_data">
                    <label class="mdui-textfield-label">穿透服务选择</label>
                </div>

                <div style="display: none;" class="mdui-textfield" id="showServerInfoInPut">
                    <label class="mdui-textfield-label">自定义穿透服务</label>
                    <input class="mdui-textfield-input" id="showServerInfoInPutVal" placeholder="ip:端口" type="text"/>
                </div>

                <div class="mdui-textfield" id="domains">
                </div>
                <div class="mdui-textfield" id="ports">
                </div>
            </div>
            <div class="mdui-dialog-actions">
                <div id="closeFrom" class="mdui-btn mdui-ripple" mdui-dialog-cancel>取消</div>
                <div id="add_btn" class="mdui-btn mdui-ripple">确定</div>
            </div>
        </form>
    </div>

    <div class="mdui-dialog" id="payImg">
        <div class="mdui-dialog-content">
            <div style="text-align: center">
                <img height="300" src="img/pay.jpg"/>
                <div>打赏请备注账号</div>
            </div>
        </div>
        <div class="mdui-dialog-actions">
            <div class="mdui-btn mdui-ripple" mdui-dialog-cancel>关闭这个傻逼弹窗</div>
        </div>
    </div>

</div>

<script>
    $("#add_btn").click(function () {
        let serialize = $("#handle-form").serializeArray();
        //处理自定义穿透服务选项
        for (let a of serialize) {
            if (a.name == 'server_info' && a.value == '-1') {
                a.value = $("#showServerInfoInPutVal").val()
            }
        }
        console.log(serialize)
        $.post("/server/proxy", serialize, function (result) {
            if (result.Code === 200) {
                alert(result.Msg)
                $("#closeFrom").click();
                refTabData()
            } else {
                alert(result.Msg)
            }
        });
    })


    var showPay = localStorage.getItem("showPay")
    console.log(showPay)
    if (showPay == 0) {
        new mdui.Dialog('#payImg').open()
        localStorage.setItem("showPay", 1)
    }

    var userInfo = localStorage.getItem("userInfo")
    if (userInfo) {
        userInfo = JSON.parse(userInfo)
        mdui.snackbar({
            message: userInfo.tips
        });

        /**
         * 刷新table数据
         */
        function refTabData() {
            var tabData = ""
            $.get("/server/info", function (result) {
                for (let a of result) {
                    tabData += "  <tr>\n" +
                        "                <td>" + a.Domain + "</td>\n" +
                        "                <td>" + a.ProxyServer + "</td>\n" +
                        "                <td>" + a.Server + "</td>\n" +
                        "                <td>" + a.Status + "</td>\n" +
                        "                <td>\n" +
                        "                    <button onclick='stop(\"" + a.Domain + "\")' class=\"mdui-btn mdui-btn-raised mdui-btn-dense mdui-color-deep-orange-accent mdui-ripple\">\n" +
                        "                        停止\n" +
                        "                    </button>\n" +
                        "                </td>\n" +
                        "            </tr>"
                }
                $("#tabData").html(
                    tabData
                )
            });
        }

        function stop(domain) {
            $.get("/server/stop?domain=" + domain, function (result) {
                alert(result.Msg)
                refTabData()
            });
        }

        $("#refUser").click(function () {
            $.post(apiAddress+"/user/login", {username: userInfo.username, password: userInfo.password}, function (result) {
                if (result.code === 200) {
                    localStorage.setItem("userInfo", JSON.stringify(result.data))
                    location.href = "./center.html";
                } else {
                    $("#closeLogin").click()
                    mdui.alert(result.msg);
                    localStorage.removeItem("userInfo")
                    location.href = "login.html"
                }
            });
        })

        $("#checkCore").click(function () {
            $.get("/core/version", function (result) {
                mdui.alert(result.Msg);
            });
        })

        $("#password").val(userInfo.password)
        $("#usernameFrom").val(userInfo.username)

        var domainHtml = "      <label class=\"mdui-textfield-label\">穿透域名</label>\n" +
            "                    "

        for (let a of Object.keys(userInfo.domains)) {
            domainHtml += "<label style='margin-right: 20px' class=\"mdui-radio\">\n" +
                "                        <input type=\"radio\" value='" + a + "' name=\"domain\"/>\n" +
                "                        <i class=\"mdui-radio-icon\"></i>\n" +
                "                        " + a + "\n" +
                "                    </label>"
        }

        $("#domains").html(
            domainHtml
        )

        var portsHtml = "<label style='margin-right: 20px' class=\"mdui-textfield-label\">外网端口号</label>     <label class=\"mdui-radio\">\n" +
            "                        <input type=\"radio\" value='0' name=\"remote_port\"/>\n" +
            "                        <i class=\"mdui-radio-icon\"></i>\n" +
            "                        随机端口\n" +
            "                    </label>"
        for (let a of userInfo.ports) {
            portsHtml += "<label style='margin-right: 20px' class=\"mdui-radio\">\n" +
                "                        <input type=\"radio\" value='" + a + "' name=\"remote_port\"/>\n" +
                "                        <i class=\"mdui-radio-icon\"></i>\n" +
                "                        " + a + "\n" +
                "                    </label>"
        }
        $("#ports").html(
            portsHtml
        )

        var serverData = []

        $.get(apiAddress+"/load/data", function (result) {
            if (result.code === 200) {
                serverData.push(...result.data)
            }

            var serverDataHtml = "             <label class=\"mdui-textfield-label\">穿透服务选择</label>\n"

            for (let a of serverData) {
                serverDataHtml += "<label style='margin-right: 20px' class=\"mdui-radio\">\n" +
                    "                        <input type=\"radio\" value='" + a.ip + ":" + a.port + "' name=\"server_info\"/>\n" +
                    "                        <i class=\"mdui-radio-icon\"></i>\n" +
                    "                        " + a.name + "在线数：" + a.num + "\n" +
                    "                    </label>"
            }
            serverDataHtml += "<label style='margin-right: 20px' class=\"mdui-radio\">\n" +
                "                        <input type=\"radio\" value='-1' name=\"server_info\"/>\n" +
                "                        <i class=\"mdui-radio-icon\"></i>\n" +
                "                        " + "自定义服务" + "\n" +
                "                    </label>"

            $("#server_data").html(
                serverDataHtml
            )

            $("#server_data :radio").on("click", function () {
                if ($(this).val() == -1) {
                    $("#showServerInfoInPut").show()
                } else {
                    $("#showServerInfoInPut").hide()
                }
            })

            $("#type :radio").on("click", function () {
                if ($(this).val() == 'UDP') {
                    $("#domains").hide()
                } else {
                    $("#domains").show()
                }
            })

        });
        refTabData()
        var ws = new WebSocket("ws://" + window.location.host + "/ws");
        ws.onmessage = function (evt) {
            var result = JSON.parse(evt.data)
            $("#log").prepend("          <li class=\"mdui-list-item \">\n" +
                "                <div class=\"mdui-list-item-content\">\n" +
                "                    <div class=\"mdui-list-item-title\">" + result.Domain + "</div>\n" +
                "                    <div class=\"mdui-list-item-text\">\n" +
                "                        " + result.Msg + "\n" +
                "                    </div>\n" +
                "                </div>\n" +
                "            </li>")
            if ($(".mdui-list-item").length > 50) {
                $("#log").html("")
            }

        };
    }
</script>

</body>
</html>
